<template>
  <el-dialog title="添加年级" :visible.sync="isAddGrade" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-form ref="form" :model="form" label-width="80px" size="small">
      <el-form-item label="年级名称" v-if="row.type === 1">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年级名称" v-else>
         <el-select v-model="form.name" placeholder="请选择年级名称">
          <el-option v-for="item in gradeList" :key="item.grade_name" :label="item.grade_name" :value="item.grade_name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对应K12" v-if="row.type === 1">
         <el-select v-model="form.k_twelve" placeholder="请选择">
          <el-option v-for="item in k12" :key="item.title" :label="item.title" :value="item.title"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <p v-if="row.type === 1" class="distributionPrompt">k12是北美小学和中学教育的简称。从小学到高中毕业的缩写</p>
    <simple-table v-if="row.type === 1" :tableConfig="tableConfig" :tableData="tableData"></simple-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="checkFn()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {APIGRADELIST, APIk12LIST, APIADDGRADE} from '@/common/api.js'
import simpleTable from '@/components/simpleTable.vue'
export default {
  components: {
    simpleTable
  },
  props: ['isAddGrade', 'row'],
  data () {
    return {
      form: {
      },
      gradeList: [],
      k12: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {id: 'phase', name: '阶段'},
          {id: 'grade', name: '年级'},
          {id: 'age', name: '年龄'}
        ]
      },
      tableData: [
        {
          phase: '小学',
          grade: '1-6年级（或1-5）',
          age: '6-12岁'
        },
        {
          phase: '中学（初中）',
          grade: '7-9年级（或6-8）',
          age: '13-15岁'
        },
        {
          phase: '中学（高中）',
          grade: '10-12年级',
          age: '16-18岁'
        }
      ]
    }
  },
  created () {
    if (this.row.school_system !== 0) {
      this.gradeListFn()
    }
    if (this.row.type === 1) {
      this.k12ListFn()
    }
  },
  methods: {
    gradeListFn () {
      APIGRADELIST({
        school_system_id: this.row.school_system
      }).then((res) => {
        if (res.status === 1) {
          this.gradeList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    k12ListFn () {
      APIk12LIST({
        school_system_id: this.row.school_system
      }).then((res) => {
        if (res.status === 1) {
          this.k12 = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleClose () {
      this.$emit('noAddGrade')
    },
    close (type) {
      this.$emit('noAddGrade', type)
    },
    checkFn () {
      if (this.form.name === '') {
        this.$message.warning('年级名称不能为空')
        return false
      }
      if (this.row.type === 1 && this.form.k_twelve === undefined) {
        this.$message.warning('k12不能为空')
        return false
      }
      this.submit()
    },
    submit () { // 提交
      APIADDGRADE({
        section_id: this.row.id,
        grade_title: this.form.name,
        k_twelve: this.form.k_twelve
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.close(1)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'src/assets/style/varibles.scss';
.distributionPrompt{
  color: $secondaryFontColor;
  font-size: $promptSize;
  margin-bottom: 20px;
  padding-left: 80px;
  box-sizing: border-box;
}
</style>
